<template>
	<div>
		<div class="login_form">
			<p><span>会员登录</span></p>
			<form name="loginForm" ref="loginFor">
				<div class="msg-error" :class="{errShow:iserror}">
					<span>{{errormsg}}</span>
				</div>
				<div class="item">
					<label class="phone"></label>
					<input type="tel" id="phone" v-model="loginForm.username" placeholder="手机号" required="required" />
				</div>
				<div class="item">
					<label class="pwd"></label>
					<input type="password" id="pwd" v-model="loginForm.password" placeholder="密码" required="required" />
				</div>
				<div class="item">
					<label class="yz"></label>
					<input type="text" id="yz" v-model="yz" placeholder="验证码" required="required" class="yz" />
				<div class="code" @click="refreshCode">
					
					<identify :identifyCode="identifyCode" id="codeImg"></identify>
				</div>
				</div>
				<div class="items">
					<input type="checkbox" v-model="loginForm.isExpert" name="isExpert" id="isExpert">
					<label for="isExpert">专家登陆</label>
				</div>
				<div class="items">
					<input type="checkbox" v-model="remember" id="remember">
					<label for="remember">记住密码</label>
					<a href="#">忘记密码?</a>
				</div>
				<div class="btn">
					<input type="button" id="login_btn" @click="dl(loginForm.username,loginForm.password,yz)" value="登录" >
					<router-link to="register" id="register_btn" tag="a">注册</router-link>
				</div>
				
			</form>
		</div>
	</div>
</template>
<script>
	import identify from './identify.vue'
	export default{
		name:'myLogin',
		components:{
			identify
		},
		data(){

			return{
				istc:true,
				dat:[],
				loginForm:{
					username:'19861601056',
					password:'123456',
					isExpert:false
				},
				remember:false,//是否记住密码
				yz:'',//验证码
				iserror:false,
				errormsg:'请输入用户名和密码',
				identifyCodes: "1234567890",
				identifyCode: ""
			}
		},
		mounted() {
			this.identifyCode = "";
			this.makeCode(this.identifyCodes, 4);
			
		},
		created() {
			// alert(window.sessionStorage.getItem('pwd'))
			this.dat = this.$store.state.dat
		},
		methods:{
			//验证码
			// getCode(){
			//  	var img=new Array("/static/img/image.png","/static/img/image02.png","/static/img/image03.png","/static/img/image04.png","/static/img/image05.png","/static/img/image06.png","/static/img/image07.png");
			//  	var index=parseInt(Math.random()*7);
			//  	$("#codeImg").attr("src",img[index]);
			// },
			makeCode(o, l) {
			  for (let i = 0; i < l; i++) {
			    this.identifyCode += this.identifyCodes[
			      this.randomNum(0, this.identifyCodes.length)
			    ];
			  }

			  console.log(this.identifyCode);
			},
			randomNum(min, max) {
			    return Math.floor(Math.random() * (max - min) + min);
			  },
			  refreshCode() {
			    this.identifyCode = "";
			    this.makeCode(this.identifyCodes, 4);
			  },

			//登录验证
			dl(u,p,y){
				// alert(window.sessionStorage.getItem('userName'))
				// alert(JSON.stringify(this.dat))
				for (let i = 0; i < this.dat.length; i++) {
					if(u==this.dat[i].Phone
							&&p==this.dat[i].Password
							&&y==this.identifyCode
					){
						sessionStorage.setItem('id',i)
						this.istc=!this.istc
					}
				}
				if(!this.istc){
					alert('登录成功正在跳转')
					this.$router.push({'path':'/loginH'})
				}else {
					alert("出错了")
				}
				/*if(u==window.sessionStorage.getItem('userName')
						&&p==window.sessionStorage.getItem('pwd')
						&&y==this.identifyCode
				){
					alert('登录成功正在跳转')

					this.$router.push({'path':'/loginH'})
				}else{

					alert("出错了")
				}*/
			},
			
		}
	}
</script>

<style scoped="scoped" lang="less">

	.login_form{
		width:300px;
		height:300px;
		margin: 0 auto;
	}
	.login_form p{
		
		background:url("../../assets/images/right.png") no-repeat right;
		background-size:149px 100%;
		text-align: left;
	}
	.login_form p span{
		display:inline-block;
		line-height:38px;
		background:#037EDB;
		padding:1px 30px;
		margin-left: 0;
		color:#ffffff;
	}
	.login_form form{
		border:1px solid #d8ebfa;
		border-top:none;
		padding:0px 25px 10px 25px;
	}
	.login_form .userMessage {
		border:1px solid #d8ebfa;
		border-top:none;
		padding:0px 25px 10px 25px;
	}
	.login_form .item{
		height:32px;
		margin-bottom:10px;
	}
	.login_form .item input{
		width:175px;
		font-size:14px;
		line-height:12px;
		border:1px solid #efefef;
		padding:10px 20px 10px 20px;
		color:#999;
	}
	.login_form .item input.yz {
		width:66px;
		font-size: 14px;
		line-height: 15px;
		border: 1px solid #efefef;
		padding: 10px 131px 10px 20px;
		color: #999;
	}
	.login_form .item .code{
		position: relative;
		width: 105px;
		cursor:pointer;
	}
	#codeImg {
		position: absolute;
		right:-110px;
		top: -36px;
		width: 105px;
		height: 35px;
		border-left: 1px solid #efefef;
		cursor:pointer;
	}
	
	.login_form .items{
		font-size:0;
		margin-bottom:10px;
		float:left;
	}
	.login_form .items:nth-of-type(5),.login_form .items:nth-of-type(4){
		font-size:0;
		height: 18px;
		margin-bottom:3px;
		float:left;
	}
	.login_form .items label{
		font-size:14px;
		vertical-align:middle;
		margin-right:75px;
	}
	.login_form .items #remember,.login_form .items #isExpert{
		vertical-align:middle;
		margin-right:5px;
	}
	.login_form .items a{
		float:right;
		font-size:14px;
		color:#666;
	}
	.login_form .btn{
		padding:0 10px;
	}
	.login_form .btn a,#login_btn{
		display:inline-block;
		width:85px;
		height:30px;
		line-height:30px;
		text-align:center;
		color:#ffffff;
		border:0;
		background:none;
		cursor:pointer;
	}
	.login_form #login_btn{
		background:#037EDB;
		border-radius:20px;
	}
	.login_form #register_btn{
		float:right;
		background:#27ce85;
		border-radius:20px;
	}
	.login_form .msg-error {
		margin:3px 3px 3px 3px;
		line-height: 20px;
		visibility: hidden;
		background: pink;
		border:1px solid red;
		font-size: 12px;
		color: red;
		
	}
	.errShow {
		visibility: visible !important;
	}
	
</style>
